import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/plugins/extended_image.dart';
import 'package:flutter_application_1/utils/source_utils.dart';

class RankRow extends StatefulWidget {
  final Function? onTap;
  final List<String> rank;
  Color primaryColor;

  RankRow({
    Key? key,
    this.onTap,
    this.rank = const [],
    this.primaryColor = Colors.transparent,
  }) : super(key: key);

  @override
  _RankRowState createState() => _RankRowState();
}

class _RankRowState extends State<RankRow> {
  List<String> _rank = [];

  // 头像图标
  Widget _iconBuilder(int index) {
    const double avatarSize = 36;
    const double iconSize = 20;

    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(avatarSize),
          child: ExtendedImage.network(
            _rank[index],
            width: avatarSize,
            height: avatarSize,
            loadStateChanged: commonLoadStateChanged,
          ),
        ),
        SizedBox(
          width: avatarSize,
          height: avatarSize,
          child: OverflowBox(
            maxWidth: avatarSize + iconSize / 3,
            maxHeight: avatarSize,
            alignment: Alignment.topLeft,
            child: Align(
              alignment: Alignment.bottomRight,
              child: Image.asset(
                ImageUtils.wrapAssets(
                  'rocket-icon.png',
                ),
                width: iconSize,
                height: iconSize,
              ),
            ),
          ),
        )
      ],
    );
  }

  @override
  void initState() {
    super.initState();
    // 只显示前 5 个头像
    _rank = widget.rank.sublist(0, 5);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (widget.onTap != null) {
          widget.onTap!();
        }
      },
      child: Container(
        height: 60,
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: List.generate(
                  _rank.length,
                  (index) => _iconBuilder(index),
                ),
              ),
            ),
            Icon(
              Icons.more_vert,
              color: Color.fromRGBO(229, 229, 229, 1),
              size: 30,
            ),
            Container(
              width: 38,
              height: 38,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: widget.primaryColor,
                borderRadius: BorderRadius.circular(38),
              ),
              child: Text(
                '查看榜单',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 11,
                  letterSpacing: 2,
                  height: 1.3,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
